<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盖世数据智能分析平台 - 内容管理</title>
    <!-- 固定样式引入 - 不可修改路径 -->
    <!-- 引入React和ReactDOM -->
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>

    <!-- 引入Material-UI核心依赖 -->
    <script src="/libs/material-ui.development.js"></script>
    <script src="/libs/emotion-react.umd.min.js"></script>
    <script src="/libs/emotion-styled.umd.min.js"></script>

    <!-- 引入Babel用于解析JSX -->
    <script src="/libs/babel.min.js"></script>

    <!-- 引入Material图标（可选） -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="/pages/app.css">
    <!-- 引入marked用于markdown渲染 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/marked/16.1.1/lib/marked.umd.js"></script> -->
    <script src="/libs/marked.umd.js"></script>
    
    <!-- 添加自定义样式修复分页问题 -->
    <style>
        /* 修复分页超出内容区域的问题 */
        .card .pagination {
            margin: 20px 0;
            padding: 0 20px;
        }
        
        /* 确保卡片内容区域正确包含所有元素 */
        .card {
            overflow: visible; /* 修改为visible确保分页不被隐藏 */
        }
        
        /* 调整表格容器样式 */
        .table-wrapper {
            overflow-x: auto;
            margin-bottom: 0;
        }
        
        /* 调整分页导航样式 */
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 20px 0;
            padding: 0;
            position: relative; /* 确保分页在正确的层级 */
            z-index: 1; /* 确保分页可点击 */
        }
        
        .page-item {
            margin: 0 5px;
        }
        
        .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background-color: #F8F8F8;
            border: 1px solid #E5E5E5;
            border-radius: 6px;
            color: #666666;
            text-decoration: none;
            transition: all 0.2s;
            position: relative; /* 确保可点击 */
            z-index: 2; /* 确保在卡片之上 */
        }
        
        .page-link:hover {
            background-color: #E5E5E5;
            border-color: #0066CC;
            color: #0066CC;
        }
        
        .page-item.active .page-link {
            background-color: #0066CC;
            color: #FFFFFF;
            border-color: #0066CC;
        }
        
        .page-item.disabled .page-link {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 确保分页容器有足够空间 */
        .content-list-container {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <!-- 固定脚本引入 - 不可修改路径 -->
    <script type="text/babel" data-type="module">
        // 固定核心库引入
        import iToolX, { iUpload, iUtils, iEmit } from "http://editor.aibot.gasgoo.com/editor-ui/client.js?a72dfc24ac69ccae7cf363c09e192c19";
        import clientState from "/pages/clientState.js";

        // 从MUI导入所需组件
        const { 
            Button, 
            Card, 
            CardContent, 
            CardHeader, 
            Typography,
            Table,
            TableBody,
            TableCell,
            TableContainer,
            TableHead,
            TableRow,
            TablePagination,
            TextField,
            Select,
            MenuItem,
            FormControl,
            InputLabel,
            Checkbox,
            IconButton,
            Box,
            Grid,
            Chip,
            Snackbar,
            Alert,
            Dialog,
            DialogActions,
            DialogContent,
            DialogContentText,
            DialogTitle,
            Paper,
            Tooltip,
            Divider,
            Tabs,
            Tab,
            List,
            ListItem,
            ListItemText,
            Badge,
            CircularProgress,
            Accordion,
            AccordionSummary,
            AccordionDetails,
            LinearProgress,
            Pagination
        } = MaterialUI;

        // 创建React组件
        function ContentManagement() {
            // 状态管理
            const [contents, setContents] = React.useState([]);
            const [loading, setLoading] = React.useState(false);
            const [total, setTotal] = React.useState(0);
            const [page, setPage] = React.useState(1);
            const [pageSize, setPageSize] = React.useState(10);
            const [selected, setSelected] = React.useState([]);
            const [filters, setFilters] = React.useState({
                ...clientState.getContentFilters(),
                analysisStatus: ''
            });
            const [sources, setSources] = React.useState([]);
            const [snackbar, setSnackbar] = React.useState({ open: false, message: '', severity: 'success' });
            const [deleteDialog, setDeleteDialog] = React.useState({ open: false, id: null });
            const [detailDialog, setDetailDialog] = React.useState({ 
                open: false, 
                content: null, 
                sourceDetail: null,
                analysisData: null,
                analysisLoading: false,
                keywordAnalysis: null
            });
            const [filterExpanded, setFilterExpanded] = React.useState(true);
            const [analysisCounts, setAnalysisCounts] = React.useState({}); // 存储每个内容的分析数量

            // 状态映射 - 根据README.md规范定义
            const statusMap = {
                0: "未分析",
                1: "正在分析", 
                2: "已分析",
                3: "无效数据",
                5: "AI分析中",
                6: "已完成"
            };

            // 状态颜色映射 - 使用浅色
            const statusColorMap = {
                0: "#FFE0B2", // 浅橙色 - 未分析
                1: "#BBDEFB", // 浅蓝色 - 正在分析
                2: "#C8E6C9", // 浅绿色 - 已分析
                3: "#FFCDD2", // 浅红色 - 无效数据
                5: "#E1BEE7", // 浅紫色 - AI分析中
                6: "#A5D6A7"  // 浅绿色 - 已完成
            };

            // 获取抓取源列表
            const fetchSources = async () => {
                try {
                    const response = await iToolX.modules.sourceManager.getSourceList('', null, 1, 100);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    setSources(response.data.list);
                } catch (error) {
                    showSnackbar('获取抓取源列表失败', 'error');
                }
            };

            // 获取内容列表
            const fetchContents = async () => {
                setLoading(true);
                try {
                    const response = await iToolX.modules.contentManager.getContentList(
                        filters.sourceId || undefined,
                        filters.keyword || undefined,
                        filters.analysisStatus !== '' ? parseInt(filters.analysisStatus) : undefined,
                        page,
                        pageSize
                    );
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    setContents(response.data.list);
                    setTotal(response.data.total);
                    
                    // 获取每个内容的分析数量
                    fetchAnalysisCounts(response.data.list);
                } catch (error) {
                    showSnackbar('获取内容列表失败', 'error');
                } finally {
                    setLoading(false);
                }
            };

            // 获取分析数量
            const fetchAnalysisCounts = async (contentList) => {
                const counts = {};
                const promises = contentList.map(content => 
                    iToolX.modules.analysisManager.getAnalysisList(content.id, null, 1, 1)
                        .then(res => {
                            if (res.code === 200) {
                                counts[content.id] = res.data.total;
                            } else {
                                counts[content.id] = 0;
                            }
                        })
                        .catch(() => {
                            counts[content.id] = 0;
                        })
                );
                
                await Promise.all(promises);
                setAnalysisCounts(counts);
            };

            // 获取内容详情
            const fetchContentDetail = async (id) => {
                try {
                    const response = await iToolX.modules.contentManager.getContentDetail(id);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    // 获取抓取源详情
                    let sourceDetail = null;
                    if (response.data.source_id) {
                        try {
                            const sourceResponse = await iToolX.modules.sourceManager.getSourceDetail(response.data.source_id);
                            if (sourceResponse.code === 200) {
                                sourceDetail = sourceResponse.data;
                            }
                        } catch (error) {
                            console.error('获取抓取源详情失败', error);
                        }
                    }
                    
                    // 设置详情对话框状态
                    setDetailDialog({ 
                        open: true, 
                        content: response.data, 
                        sourceDetail,
                        analysisData: null,
                        keywordAnalysis: null,
                        analysisLoading: true
                    });
                    
                    // 获取分析数据
                    try {
                        const analysisResponse = await iToolX.modules.analysisManager.getAnalysisList(id, null, 1, 100);
                        if (analysisResponse.code === 200) {
                            // 获取关键词分析数据
                            const keywordResponse = await iToolX.modules.analysisManager.getAnalysisList(id, 'keyword', 1, 100);
                            const keywordData = keywordResponse.code === 200 ? keywordResponse.data : null;
                            
                            setDetailDialog(prev => ({
                                ...prev,
                                analysisData: analysisResponse.data,
                                keywordAnalysis: keywordData,
                                analysisLoading: false
                            }));
                        }
                    } catch (error) {
                        console.error('获取分析数据失败', error);
                        setDetailDialog(prev => ({
                            ...prev,
                            analysisLoading: false
                        }));
                    }
                } catch (error) {
                    showSnackbar('获取内容详情失败', 'error');
                }
            };

            // 删除内容
            const handleDelete = async (id) => {
                try {
                    const response = await iToolX.modules.contentManager.deleteContent(id);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    showSnackbar('删除成功', 'success');
                    fetchContents();
                } catch (error) {
                    showSnackbar('删除失败', 'error');
                }
                setDeleteDialog({ open: false, id: null });
            };

            // 批量删除内容
            const handleBatchDelete = async () => {
                if (selected.length === 0) {
                    showSnackbar('请先选择要删除的内容', 'warning');
                    return;
                }
                try {
                    const response = await iToolX.modules.contentManager.batchDeleteContent(selected);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    showSnackbar('批量删除成功', 'success');
                    setSelected([]);
                    fetchContents();
                } catch (error) {
                    showSnackbar('批量删除失败', 'error');
                }
            };

            // 显示提示消息
            const showSnackbar = (message, severity = 'success') => {
                setSnackbar({ open: true, message, severity });
            };

            // 处理筛选条件变化
            const handleFilterChange = (field, value) => {
                const newFilters = { ...filters, [field]: value };
                setFilters(newFilters);
                clientState.setContentFilters(newFilters);
            };

            // 重置筛选条件
            const resetFilters = () => {
                const newFilters = {
                    sourceId: '',
                    keyword: '',
                    analysisStatus: ''
                };
                setFilters(newFilters);
                clientState.setContentFilters(newFilters);
                setPage(1);
            };

            // 处理分页变化
            const handlePageChange = (event, newPage) => {
                setPage(newPage);
            };

            // 处理每页数量变化
            const handlePageSizeChange = (event) => {
                setPageSize(parseInt(event.target.value, 10));
                setPage(1);
            };

            // 处理选择行
            const handleSelectAllClick = (event) => {
                if (event.target.checked) {
                    const newSelecteds = contents.map((n) => n.id);
                    setSelected(newSelecteds);
                    return;
                }
                setSelected([]);
            };

            const handleCheckboxClick = (event, id) => {
                event.stopPropagation();
                const selectedIndex = selected.indexOf(id);
                let newSelected = [];

                if (selectedIndex === -1) {
                    newSelected = newSelected.concat(selected, id);
                } else if (selectedIndex === 0) {
                    newSelected = newSelected.concat(selected.slice(1));
                } else if (selectedIndex === selected.length - 1) {
                    newSelected = newSelected.concat(selected.slice(0, -1));
                } else if (selectedIndex > 0) {
                    newSelected = newSelected.concat(
                        selected.slice(0, selectedIndex),
                        selected.slice(selectedIndex + 1),
                    );
                }

                setSelected(newSelected);
            };

            const isSelected = (id) => selected.indexOf(id) !== -1;

            // 初始化数据
            React.useEffect(() => {
                fetchSources();
            }, []);

            // 当筛选条件或分页变化时重新获取数据
            React.useEffect(() => {
                fetchContents();
            }, [filters, page, pageSize]);

            // 格式化日期
            const formatDate = (dateString) => {
                if (!dateString) return '-';
                const date = new Date(dateString);
                return date.toLocaleString();
            };

            // 获取分析状态标签 - 优化状态显示
            const getAnalysisStatusChip = (status) => {
                // 确保状态是数字类型
                const statusNum = parseInt(status, 10);
                
                // 根据README.md规范显示状态
                return (
                    <Chip 
                        label={statusMap[statusNum] || statusMap[0]} 
                        size="small"
                        style={{ 
                            backgroundColor: statusColorMap[statusNum] || statusColorMap[0],
                            color: '#333333',
                            fontWeight: '500',
                            borderRadius: '16px',
                            fontSize: '11px' // 缩小字体
                        }}
                    />
                );
            };

            // 渲染Markdown内容
            const renderMarkdown = (content) => {
                if (!content) return '';
                
                // 如果内容包含HTML标签，先尝试转换为纯文本再转为Markdown
                let markdownContent = content;
                
                // 简单的HTML到Markdown转换
                markdownContent = markdownContent
                    .replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1')
                    .replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1')
                    .replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1')
                    .replace(/<h4[^>]*>(.*?)<\/h4>/gi, '#### $1')
                    .replace(/<p[^>]*>(.*?)<\/p>/gi, '$1\n\n')
                    .replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
                    .replace(/<b[^>]*>(.*?)<\/b>/gi, '**$1**')
                    .replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
                    .replace(/<i[^>]*>(.*?)<\/i>/gi, '*$1*')
                    .replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, '[$2]($1)')
                    .replace(/<ul[^>]*>(.*?)<\/ul>/gis, (match, content) => {
                        return content.replace(/<li[^>]*>(.*?)<\/li>/gi, '- $1') + '\n';
                    })
                    .replace(/<ol[^>]*>(.*?)<\/ol>/gis, (match, content) => {
                        let index = 1;
                        return content.replace(/<li[^>]*>(.*?)<\/li>/gi, () => `${index++}. $1`) + '\n';
                    })
                    .replace(/<br\s*\/?>/gi, '\n')
                    .replace(/<[^>]*>/g, '');
                
                try {
                    return marked.parse(markdownContent);
                } catch (error) {
                    console.error('Markdown渲染失败:', error);
                    return `<pre>${markdownContent}</pre>`;
                }
            };

            // 分析状态标签页
            function TabPanel(props) {
                const { children, value, index, ...other } = props;
                return (
                    <div
                        role="tabpanel"
                        hidden={value !== index}
                        id={`analysis-tabpanel-${index}`}
                        aria-labelledby={`analysis-tab-${index}`}
                        {...other}
                    >
                        {value === index && (
                            <Box sx={{ p: 3 }}>
                                {children}
                            </Box>
                        )}
                    </div>
                );
            }

            function a11yProps(index) {
                return {
                    id: `analysis-tab-${index}`,
                    'aria-controls': `analysis-tabpanel-${index}`,
                };
            }

            const [analysisTabValue, setAnalysisTabValue] = React.useState(0);

            const handleAnalysisTabChange = (event, newValue) => {
                setAnalysisTabValue(newValue);
            };

            return (
                <div className="page-wrapper">
                    {/* 顶部导航 */}
                    <header className="header">
                        <div className="container nav-container">
                            <a href="/" className="logo">
                                <div className="logo-icon">C</div>
                                <span>盖世数据智能分析平台</span>
                            </a>
                            <nav>
                                <ul className="nav-menu">
                                    <li className="nav-item">
                                        <a href="/pages/home.html" className="nav-link">首页</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/sources.html" className="nav-link">抓取源</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/contentManagement.html" className="nav-link active">抓取内容</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/analysisList.html" className="nav-link">抓取内容分析</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/promptTemplateManagement.html" className="nav-link">提示词管理</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/contentPoolManagement.html" className="nav-link">内容池管理</a>
                                    </li>
                                </ul>
                            </nav>
                            <div className="nav-actions">
                                <div className="search-box">
                                    <span className="material-icons search-icon">search</span>
                                    <input type="text" className="search-input" placeholder="搜索..." />
                                </div>
                            </div>
                        </div>
                    </header>

                    {/* 主体内容 */}
                    <main className="main-content">
                        <div className="container">
                            {/* 筛选模块 */}
                            <div className="filter-container">
                                <div className="filter-header" onClick={() => setFilterExpanded(!filterExpanded)}>
                                    <h3 className="filter-title">筛选条件</h3>
                                    <button className={`filter-toggle ${filterExpanded ? '' : 'collapsed'}`}>
                                        <span className="material-icons">expand_less</span>
                                    </button>
                                </div>
                                <div className={`filter-body ${filterExpanded ? '' : 'collapsed'}`}>
                                    <div className="filter-row">
                                        <div className="filter-col">
                                            <label className="form-label">抓取源</label>
                                            <select 
                                                className="form-select"
                                                value={filters.sourceId}
                                                onChange={(e) => handleFilterChange('sourceId', e.target.value)}
                                            >
                                                <option value="">全部</option>
                                                {sources.map(source => (
                                                    <option key={source.id} value={source.id}>
                                                        {source.site_title}
                                                    </option>
                                                ))}
                                            </select>
                                        </div>
                                        <div className="filter-col">
                                            <label className="form-label">关键词</label>
                                            <input 
                                                type="text" 
                                                className="form-input"
                                                value={filters.keyword}
                                                onChange={(e) => handleFilterChange('keyword', e.target.value)}
                                                placeholder="输入关键词"
                                            />
                                        </div>
                                        <div className="filter-col">
                                            <label className="form-label">分析状态</label>
                                            <select 
                                                className="form-select"
                                                value={filters.analysisStatus}
                                                onChange={(e) => handleFilterChange('analysisStatus', e.target.value)}
                                            >
                                                <option value="">全部</option>
                                                <option value="0">{statusMap[0]}</option>
                                                <option value="1">{statusMap[1]}</option>
                                                <option value="2">{statusMap[2]}</option>
                                                <option value="3">{statusMap[3]}</option>
                                                <option value="5">{statusMap[5]}</option>
                                                <option value="6">{statusMap[6]}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div className="filter-actions">
                                        <button className="btn" onClick={resetFilters}>
                                            重置
                                        </button>
                                        <button className="btn btn-primary" onClick={fetchContents}>
                                            <span className="material-icons" style={{ fontSize: '16px', marginRight: '5px', verticalAlign: 'middle' }}>search</span>
                                            搜索
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {/* 操作模块 */}
                            <div className="card">
                                <div className="card-body">
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        <h3 className="card-title">内容列表 ({total}条记录)</h3>
                                        <div className="btn-group">
                                            <button 
                                                className="btn btn-primary"
                                                onClick={handleBatchDelete}
                                                disabled={selected.length === 0}
                                                style={{ backgroundColor: '#EF9A9A', color: '#333333' }} // 使用浅红色
                                            >
                                                <span className="material-icons" style={{ fontSize: '16px', marginRight: '5px', verticalAlign: 'middle' }}>delete</span>
                                                批量删除 ({selected.length})
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* 列表模块 - 使用容器包裹卡片和分页 */}
                            <div className="content-list-container">
                                <div className="card">
                                    <div className="table-wrapper">
                                        <table className="data-table">
                                            <thead>
                                                <tr>
                                                    <th style={{ width: '50px' }}>
                                                        <Checkbox
                                                            indeterminate={selected.length > 0 && selected.length < contents.length}
                                                            checked={contents.length > 0 && selected.length === contents.length}
                                                            onChange={handleSelectAllClick}
                                                        />
                                                    </th>
                                                    <th>ID</th>
                                                    <th>内容标题</th>
                                                    <th>来源</th>
                                                    <th>URL</th>
                                                    <th>内容创建时间</th>
                                                    <th>分析状态</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {loading ? (
                                                    <tr>
                                                        <td colSpan={8} style={{ textAlign: 'center' }}>
                                                            <div className="loading">
                                                                <div className="loading-spinner"></div>
                                                                </div>
                                                        </td>
                                                    </tr>
                                                ) : contents.length === 0 ? (
                                                    <tr>
                                                        <td colSpan={8} style={{ textAlign: 'center' }}>
                                                            <div className="empty-state">
                                                                <div className="empty-icon">
                                                                    <span className="material-icons">inbox</span>
                                                                </div>
                                                                <div className="empty-text">暂无数据</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                ) : (
                                                    contents.map((content) => {
                                                        const isItemSelected = isSelected(content.id);
                                                        const analysisCount = analysisCounts[content.id] || 0;
                                                        return (
                                                            <tr
                                                                key={content.id}
                                                                className={isItemSelected ? 'selected' : ''}
                                                            >
                                                                <td>
                                                                    <Checkbox 
                                                                        checked={isItemSelected} 
                                                                        onClick={(e) => handleCheckboxClick(e, content.id)}
                                                                    />
                                                                </td>
                                                                <td>{content.id}</td>
                                                                <td>
                                                                    <div style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                                                        {content.title || '无标题'}
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    {sources.find(s => s.id === content.source_id)?.site_title || '-'}
                                                                </td>
                                                                <td>
                                                                    <Tooltip title={content.site_full_url} arrow>
                                                                        <a 
                                                                            href={content.site_full_url} 
                                                                            target="_blank" 
                                                                            rel="noopener noreferrer"
                                                                            style={{ color: '#90CAF9', textDecoration: 'none' }} // 使用浅蓝色
                                                                        >
                                                                            <div style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                                                                {content.site_full_url}
                                                                            </div>
                                                                        </a>
                                                                    </Tooltip>
                                                                </td>
                                                                <td>{formatDate(content.content_create_at)}</td>
                                                                <td>
                                                                    {getAnalysisStatusChip(content.analysis_status)}
                                                                </td>
                                                                <td>
                                                                    <IconButton 
                                                                        size="small" 
                                                                        onClick={(e) => {
                                                                            e.stopPropagation();
                                                                            fetchContentDetail(content.id);
                                                                        }}
                                                                        style={{ color: '#90CAF9', marginRight: '5px' }} // 使用浅蓝色
                                                                    >
                                                                        <span className="material-icons">visibility</span>
                                                                    </IconButton>
                                                                    <IconButton 
                                                                        size="small" 
                                                                        onClick={(e) => {
                                                                            e.stopPropagation();
                                                                            setDeleteDialog({ open: true, id: content.id });
                                                                        }}
                                                                        style={{ color: '#EF9A9A' }} // 使用浅红色
                                                                    >
                                                                        <span className="material-icons">delete</span>
                                                                    </IconButton>
                                                                </td>
                                                            </tr>
                                                        );
                                                    })
                                                )}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                
                                {/* 分页模块 */}
                                <div className="card" style={{ marginTop: '20px', padding: '20px' }}>
                                    <Box display="flex" justifyContent="space-between" alignItems="center">
                                        <Typography variant="body2">
                                            共 {total} 条记录，第 {page} 页，每页
                                            <Select
                                                value={pageSize}
                                                onChange={handlePageSizeChange}
                                                style={{ margin: '0 5px' }}
                                                size="small"
                                            >
                                                <MenuItem value={5}>5</MenuItem>
                                                <MenuItem value={10}>10</MenuItem>
                                                <MenuItem value={20}>20</MenuItem>
                                                <MenuItem value={50}>50</MenuItem>
                                            </Select>
                                            条
                                        </Typography>
                                        <Pagination
                                            count={Math.ceil(total / pageSize)}
                                            page={page}
                                            onChange={handlePageChange}
                                            color="primary"
                                            showFirstButton
                                            showLastButton
                                        />
                                    </Box>
                                </div>
                            </div>
                        </div>
                    </main>

                    {/* 页脚 */}
                    <footer className="footer">
                        <div className="container footer-content">
                            <div className="footer-copyright">
                                ? 2023 盖世数据智能分析平台. 保留所有权利.
                            </div>
                            <ul className="footer-links">
                                <li><a href="#">隐私政策</a></li>
                                <li><a href="#">使用条款</a></li>
                                <li><a href="#">联系我们</a></li>
                            </ul>
                        </div>
                    </footer>

                    {/* 提示消息 */}
                    <Snackbar
                        open={snackbar.open}
                        autoHideDuration={6000}
                        onClose={() => setSnackbar({ ...snackbar, open: false })}
                    >
                        <Alert 
                            onClose={() => setSnackbar({ ...snackbar, open: false })} 
                            severity={snackbar.severity}
                            className={snackbar.severity === 'success' ? 'alert-success' : 
                                     snackbar.severity === 'error' ? 'alert-danger' : 
                                     snackbar.severity === 'warning' ? 'alert-warning' : 'alert-info'}
                        >
                            {snackbar.message}
                        </Alert>
                    </Snackbar>

                    {/* 删除确认对话框 */}
                    <Dialog
                        open={deleteDialog.open}
                        onClose={() => setDeleteDialog({ open: false, id: null })}
                    >
                        <DialogTitle>确认删除</DialogTitle>
                        <DialogContent>
                            <DialogContentText>
                                确定要删除这条内容吗？此操作不可撤销。
                            </DialogContentText>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => setDeleteDialog({ open: false, id: null })}>取消</Button>
                            <Button onClick={() => handleDelete(deleteDialog.id)} style={{ color: '#333333', backgroundColor: '#EF9A9A' }}> {/* 使用浅红色 */}
                                删除
                            </Button>
                        </DialogActions>
                    </Dialog>

                    {/* 内容详情对话框 - 优化UI */}
                    <Dialog
                        open={detailDialog.open}
                        onClose={() => setDetailDialog({ open: false, content: null, sourceDetail: null, analysisData: null, keywordAnalysis: null })}
                        maxWidth={false}
                        PaperProps={{
                            style: {
                                width: '90%',
                                maxWidth: '1440px',
                                height: '85vh',
                                maxHeight: '85vh',
                                borderRadius: '12px',
                                overflow: 'hidden'
                            }
                        }}
                    >
                        <DialogTitle style={{ 
                            backgroundColor: '#F5F7FA', 
                            borderBottom: '1px solid #E5E6EB',
                            padding: '20px 24px'
                        }}>
                            <Typography variant="h5" style={{ color: '#333333', fontWeight: '600' }}>
                                内容详情
                            </Typography>
                        </DialogTitle>
                        <DialogContent style={{ height: 'calc(85vh - 130px)', overflow: 'hidden', padding: '0' }}>
                            {detailDialog.content && (
                                <Grid container style={{ height: '100%' }}>
                                    {/* 左侧：内容的基本信息 */}
                                    <Grid item xs={3} style={{ 
                                        height: '100%', 
                                        display: 'flex', 
                                        flexDirection: 'column',
                                        backgroundColor: '#F5F7FA',
                                        padding: '20px',
                                        borderRight: '1px solid #E5E6EB',
                                        overflowY: 'auto'
                                    }}>
                                        {/* 内容基本信息 - 增加高度 */}
                                        <Card variant="outlined" style={{ 
                                            marginBottom: '16px', 
                                            borderRadius: '8px',
                                            border: '1px solid #E5E6EB',
                                            flex: '0 0 auto'
                                        }}>
                                            <CardHeader 
                                                title="内容信息" 
                                                titleTypographyProps={{ 
                                                    variant: 'h6', 
                                                    color: '#333333',
                                                    fontWeight: '600'
                                                }}
                                                style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #E5E6EB' }}
                                            />
                                            <CardContent style={{ padding: '16px' }}>
                                                <Grid container spacing={2}>
                                                    <Grid item xs={12}>
                                                        <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                            内容标题
                                                        </Typography>
                                                        <Typography variant="body1" style={{ 
                                                            fontWeight: '500',
                                                            color: '#333333',
                                                            wordBreak: 'break-word',
                                                            lineHeight: '1.5'
                                                        }}>
                                                            {detailDialog.content.title || '无标题'}
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                            URL
                                                        </Typography>
                                                        <Typography variant="body1" style={{ 
                                                            wordBreak: 'break-all',
                                                            fontSize: '14px',
                                                            lineHeight: '1.5'
                                                        }}>
                                                            <a 
                                                                href={detailDialog.content.site_full_url} 
                                                                target="_blank" 
                                                                rel="noopener noreferrer"
                                                                style={{ color: '#90CAF9' }} // 使用浅蓝色
                                                            >
                                                                {detailDialog.content.site_full_url}
                                                            </a>
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={6}>
                                                        <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                            内容创建时间
                                                        </Typography>
                                                        <Typography variant="body1" style={{ fontSize: '14px' }}>
                                                            {formatDate(detailDialog.content.content_create_at)}
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={6}>
                                                        <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                            抓取时间
                                                        </Typography>
                                                        <Typography variant="body1" style={{ fontSize: '14px' }}>
                                                            {formatDate(detailDialog.content.create_at)}
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item xs={12}>
                                                        <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                            分析状态
                                                        </Typography>
                                                        <div>
                                                            {getAnalysisStatusChip(detailDialog.content.analysis_status)}
                                                        </div>
                                                    </Grid>
                                                </Grid>
                                            </CardContent>
                                        </Card>
                                        
                                        {/* 描述信息 - 优化样式 */}
                                        <Card variant="outlined" style={{ 
                                            marginBottom: '16px', 
                                            borderRadius: '8px',
                                            border: '1px solid #E5E6EB',
                                            flex: '0 0 auto'
                                        }}>
                                            <CardHeader 
                                                title="描述信息" 
                                                titleTypographyProps={{ 
                                                    variant: 'h6', 
                                                    color: '#333333',
                                                    fontWeight: '600'
                                                }}
                                                style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #E5E6EB' }}
                                            />
                                            <CardContent style={{ padding: '16px' }}>
                                                <Tooltip title={detailDialog.content.comment || ''} arrow>
                                                    <Typography variant="body1" style={{ 
                                                        color: '#666666',
                                                        fontSize: '14px',
                                                        lineHeight: '1.5',
                                                        display: '-webkit-box',
                                                        WebkitBoxOrient: 'vertical',
                                                        WebkitLineClamp: 3,
                                                        overflow: 'hidden',
                                                        textOverflow: 'ellipsis'
                                                    }}>
                                                        {detailDialog.content.comment || '暂无描述信息'}
                                                    </Typography>
                                                </Tooltip>
                                            </CardContent>
                                        </Card>
                                        
                                        {/* 关键词信息 - 增加高度 */}
                                        <Card variant="outlined" style={{ 
                                            marginBottom: '16px', 
                                            borderRadius: '8px',
                                            border: '1px solid #E5E6EB',
                                            flex: '0 0 auto'
                                        }}>
                                            <CardHeader 
                                                title="关键词信息" 
                                                titleTypographyProps={{ 
                                                    variant: 'h6', 
                                                    color: '#333333',
                                                    fontWeight: '600'
                                                }}
                                                style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #E5E6EB' }}
                                            />
                                            <CardContent style={{ padding: '16px' }}>
                                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                                                    {detailDialog.keywordAnalysis && detailDialog.keywordAnalysis.list && detailDialog.keywordAnalysis.list.length > 0 ? 
                                                        detailDialog.keywordAnalysis.list
                                                            .filter(item => item.keyword)
                                                            .sort((a, b) => b.keyword_weight - a.keyword_weight)
                                                            .map((item, index) => (
                                                                <Chip 
                                                                    key={index} 
                                                                    label={`${item.keyword} (${Math.round(item.keyword_weight)})`} 
                                                                    size="small" 
                                                                    style={{ 
                                                                        backgroundColor: '#FFFFFF',
                                                                        color: '#333333',
                                                                        border: '1px solid #E5E6EB',
                                                                        borderRadius: '16px',
                                                                        fontWeight: '500',
                                                                        marginBottom: '8px',
                                                                        fontSize: '11px' // 缩小字体
                                                                    }}
                                                                />
                                                            )) : 
                                                        <Typography variant="body1" style={{ color: '#999999' }}>暂无关键词分析</Typography>
                                                    }
                                                </div>
                                            </CardContent>
                                        </Card>
                                        
                                        {/* 抓取源信息 - 优化样式 */}
                                        {detailDialog.sourceDetail && (
                                            <Card variant="outlined" style={{ 
                                                borderRadius: '8px',
                                                border: '1px solid #E5E6EB',
                                                flex: '0 0 auto'
                                            }}>
                                                <CardHeader 
                                                    title="抓取源信息" 
                                                    titleTypographyProps={{ 
                                                        variant: 'h6', 
                                                        color: '#333333',
                                                        fontWeight: '600'
                                                    }}
                                                    style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #E5E6EB' }}
                                                />
                                                <CardContent style={{ padding: '16px' }}>
                                                    <Grid container spacing={2}>
                                                        <Grid item xs={12}>
                                                            <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                                抓取源ID
                                                            </Typography>
                                                            <Typography variant="body1" style={{ fontSize: '14px' }}>
                                                                {detailDialog.sourceDetail.id}
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                                站点标题
                                                            </Typography>
                                                            <Typography variant="body1" style={{ 
                                                                fontSize: '14px',
                                                                fontWeight: '500',
                                                                color: '#333333'
                                                            }}>
                                                                {detailDialog.sourceDetail.site_title}
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                                站点URL
                                                            </Typography>
                                                            <Typography variant="body1" style={{ 
                                                                wordBreak: 'break-all',
                                                                fontSize: '14px'
                                                            }}>
                                                                <a 
                                                                    href={detailDialog.sourceDetail.site_url} 
                                                                    target="_blank" 
                                                                    rel="noopener noreferrer"
                                                                    style={{ color: '#90CAF9' }} // 使用浅蓝色
                                                                >
                                                                    {detailDialog.sourceDetail.site_url}
                                                                </a>
                                                            </Typography>
                                                        </Grid>
                                                        <Grid item xs={12}>
                                                            <Typography variant="subtitle2" color="textSecondary" style={{ fontSize: '12px', marginBottom: '4px' }}>
                                                                启用状态
                                                            </Typography>
                                                            <Typography variant="body1">
                                                                {detailDialog.sourceDetail.is_enable ? (
                                                                    <Chip label="启用" size="small" style={{ 
                                                                        backgroundColor: '#C8E6C9', // 使用浅绿色
                                                                        color: '#333333',
                                                                        fontWeight: '500',
                                                                        fontSize: '11px' // 缩小字体
                                                                    }} />
                                                                ) : (
                                                                    <Chip label="禁用" size="small" style={{ 
                                                                        backgroundColor: '#FFCDD2', // 使用浅红色
                                                                        color: '#333333',
                                                                        fontWeight: '500',
                                                                        fontSize: '11px' // 缩小字体
                                                                    }} />
                                                                )}
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </CardContent>
                                            </Card>
                                        )}
                                    </Grid>
                                    
                                    {/* 右侧：抓取到的内容信息和分析状态 */}
                                    <Grid item xs={9} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                                        <Paper 
                                            elevation={0}
                                            style={{ 
                                                height: '100%',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                backgroundColor: '#FFFFFF'
                                            }}
                                        >
                                            <Tabs 
                                                value={analysisTabValue} 
                                                onChange={handleAnalysisTabChange} 
                                                aria-label="content analysis tabs"
                                                style={{ 
                                                    borderBottom: '1px solid #E5E6EB',
                                                    backgroundColor: '#F5F7FA'
                                                }}
                                                indicatorColor="primary"
                                                textColor="primary"
                                            >
                                                <Tab 
                                                    label={
                                                        <Box display="flex" alignItems="center">
                                                            <span className="material-icons" style={{ marginRight: '8px', fontSize: '20px' }}>article</span>
                                                            抓取内容
                                                        </Box>
                                                    } 
                                                    {...a11yProps(0)} 
                                                />
                                                <Tab 
                                                    label={
                                                        <Box display="flex" alignItems="center">
                                                            <span className="material-icons" style={{ marginRight: '8px', fontSize: '20px' }}>analytics</span>
                                                            分析状态
                                                        </Box>
                                                    } 
                                                    {...a11yProps(1)} 
                                                />
                                            </Tabs>
                                            
                                            <TabPanel value={analysisTabValue} index={0} style={{ flexGrow: 1, overflow: 'auto' }}>
                                                <Box 
                                                    sx={{ 
                                                        flexGrow: 1, 
                                                        overflow: 'auto',
                                                        backgroundColor: '#FFFFFF',
                                                        padding: '24px',
                                                        borderRadius: '0 0 8px 8px',
                                                        wordWrap: 'break-word',
                                                        overflowX: 'hidden'
                                                    }}
                                                >
                                                    <Box 
                                                        dangerouslySetInnerHTML={{ __html: renderMarkdown(detailDialog.content.content) }} 
                                                        sx={{ 
                                                            lineHeight: '1.6',
                                                            color: '#333333',
                                                            fontSize: '15px',
                                                            wordWrap: 'break-word',
                                                            overflowWrap: 'break-word',
                                                            '& h1, & h2, & h3, & h4, & h5, & h6': {
                                                                color: '#333333',
                                                                fontWeight: '600',
                                                                marginTop: '24px',
                                                                marginBottom: '16px',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& p': {
                                                                marginBottom: '16px',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& a': {
                                                                color: '#90CAF9', // 使用浅蓝色
                                                                textDecoration: 'none',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& a:hover': {
                                                                textDecoration: 'underline'
                                                            },
                                                            '& code': {
                                                                backgroundColor: '#F5F7FA',
                                                                padding: '2px 4px',
                                                                borderRadius: '4px',
                                                                fontFamily: 'monospace',
                                                                fontSize: '14px',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& pre': {
                                                                backgroundColor: '#F5F7FA',
                                                                padding: '16px',
                                                                borderRadius: '8px',
                                                                overflow: 'auto',
                                                                fontFamily: 'monospace',
                                                                fontSize: '14px',
                                                                lineHeight: '1.5',
                                                                whiteSpace: 'pre-wrap',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& ul, & ol': {
                                                                paddingLeft: '24px',
                                                                marginBottom: '16px'
                                                            },
                                                            '& li': {
                                                                marginBottom: '8px',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& blockquote': {
                                                                borderLeft: '4px solid #E5E6EB',
                                                                paddingLeft: '16px',
                                                                margin: '16px 0',
                                                                color: '#666666',
                                                                fontStyle: 'italic',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& table': {
                                                                width: '100%',
                                                                borderCollapse: 'collapse',
                                                                marginBottom: '16px',
                                                                tableLayout: 'fixed'
                                                            },
                                                            '& th, & td': {
                                                                border: '1px solid #E5E6EB',
                                                                padding: '8px 12px',
                                                                textAlign: 'left',
                                                                wordWrap: 'break-word',
                                                                overflowWrap: 'break-word'
                                                            },
                                                            '& th': {
                                                                backgroundColor: '#F5F7FA',
                                                                fontWeight: '600'
                                                            },
                                                            '& img': {
                                                                maxWidth: '100%',
                                                                height: 'auto',
                                                                display: 'block',
                                                                margin: '16px 0'
                                                            }
                                                        }}
                                                    />
                                                </Box>
                                            </TabPanel>
                                            
                                            <TabPanel value={analysisTabValue} index={1} style={{ flexGrow: 1, overflow: 'auto' }}>
                                                {detailDialog.analysisLoading ? (
                                                    <Box display="flex" justifyContent="center" alignItems="center" height="100%">
                                                        <Box textAlign="center">
                                                            <CircularProgress style={{ color: '#90CAF9', marginBottom: '16px' }} /> {/* 使用浅蓝色 */}
                                                            <Typography variant="h6" color="textSecondary">
                                                                正在加载分析数据...
                                                            </Typography>
                                                        </Box>
                                                    </Box>
                                                ) : detailDialog.analysisData && detailDialog.analysisData.total > 0 ? (
                                                    <Box sx={{ padding: '24px' }}>
                                                        <Box display="flex" justifyContent="space-between" alignItems="center" marginBottom="24px">
                                                            <Typography variant="h5" style={{ color: '#333333', fontWeight: '600' }}>
                                                                分析结果
                                                            </Typography>
                                                            <Chip 
                                                                label={`${detailDialog.analysisData.total}条分析`} 
                                                                size="medium" 
                                                                style={{ 
                                                                    backgroundColor: '#90CAF9', // 使用浅蓝色
                                                                    color: '#333333',
                                                                    fontWeight: '500'
                                                                }} 
                                                            />
                                                        </Box>
                                                        
                                                        <Grid container spacing={3}>
                                                            {/* 关键词分析 */}
                                                            <Grid item xs={4}>
                                                                <Card variant="outlined" style={{ 
                                                                    height: '100%',
                                                                    borderRadius: '8px',
                                                                    border: '1px solid #E5E6EB',
                                                                    overflow: 'hidden'
                                                                }}>
                                                                    <Box 
                                                                        sx={{ 
                                                                            backgroundColor: '#F5F7FA', 
                                                                            padding: '16px', 
                                                                            borderBottom: '1px solid #E5E6EB',
                                                                            display: 'flex',
                                                                            justifyContent: 'space-between',
                                                                            alignItems: 'center'
                                                                        }}
                                                                    >
                                                                        <Typography variant="h6" style={{ color: '#333333', fontWeight: '600' }}>
                                                                            关键词分析
                                                                        </Typography>
                                                                        <Chip 
                                                                            label={detailDialog.analysisData.list.filter(a => a.keyword).length} 
                                                                            size="small" 
                                                                            color="primary" 
                                                                            style={{ 
                                                                                backgroundColor: '#90CAF9', // 使用浅蓝色
                                                                                color: '#333333',
                                                                                fontWeight: '500',
                                                                                fontSize: '11px' // 缩小字体
                                                                            }}
                                                                        />
                                                                    </Box>
                                                                    <CardContent style={{ padding: '16px' }}>
                                                                        <List dense>
                                                                            {detailDialog.analysisData.list
                                                                                .filter(item => item.keyword)
                                                                                .slice(0, 5)
                                                                                .map((item, index) => (
                                                                                    <ListItem key={index} disableGutters style={{ padding: '8px 0' }}>
                                                                                        <ListItemText 
                                                                                            primary={
                                                                                                <Box display="flex" justifyContent="space-between">
                                                                                                    <Typography variant="body1" style={{ fontWeight: '500' }}>
                                                                                                        {item.keyword}
                                                                                                    </Typography>
                                                                                                    <Chip 
                                                                                                        label={`${Math.round(item.keyword_weight)}`} 
                                                                                                        size="small" 
                                                                                                        style={{ 
                                                                                                            backgroundColor: '#F5F7FA',
                                                                                                            color: '#333333',
                                                                                                            border: '1px solid #E5E6EB',
                                                                                                            borderRadius: '16px',
                                                                                                            fontWeight: '500',
                                                                                                            fontSize: '11px' // 缩小字体
                                                                                                        }} 
                                                                                                    />
                                                                                                </Box>
                                                                                            }
                                                                                        />
                                                                                    </ListItem>
                                                                                ))}
                                                                            {detailDialog.analysisData.list.filter(a => a.keyword).length > 5 && (
                                                                                <ListItem disableGutters style={{ padding: '8px 0' }}>
                                                                                    <ListItemText 
                                                                                        primary={
                                                                                            <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
                                                                                                还有 {detailDialog.analysisData.list.filter(a => a.keyword).length - 5} 个关键词...
                                                                                            </Typography>
                                                                                        }
                                                                                    />
                                                                                </ListItem>
                                                                            )}
                                                                        </List>
                                                                    </CardContent>
                                                                </Card>
                                                            </Grid>
                                                            
                                                            {/* 观点分析 */}
                                                            <Grid item xs={4}>
                                                                <Card variant="outlined" style={{ 
                                                                    height: '100%',
                                                                    borderRadius: '8px',
                                                                    border: '1px solid #E5E6EB',
                                                                    overflow: 'hidden'
                                                                }}>
                                                                    <Box 
                                                                        sx={{ 
                                                                            backgroundColor: '#F5F7FA', 
                                                                            padding: '16px', 
                                                                            borderBottom: '1px solid #E5E6EB',
                                                                            display: 'flex',
                                                                            justifyContent: 'space-between',
                                                                            alignItems: 'center'
                                                                        }}
                                                                    >
                                                                        <Typography variant="h6" style={{ color: '#333333', fontWeight: '600' }}>
                                                                            观点分析
                                                                        </Typography>
                                                                        <Chip 
                                                                            label={detailDialog.analysisData.list.filter(a => a.content_point).length} 
                                                                            size="small" 
                                                                            color="primary" 
                                                                            style={{ 
                                                                                backgroundColor: '#90CAF9', // 使用浅蓝色
                                                                                color: '#333333',
                                                                                fontWeight: '500',
                                                                                fontSize: '11px' // 缩小字体
                                                                            }}
                                                                        />
                                                                    </Box>
                                                                    <CardContent style={{ padding: '16px' }}>
                                                                        <List dense>
                                                                            {detailDialog.analysisData.list
                                                                                .filter(item => item.content_point)
                                                                                .slice(0, 5)
                                                                                .map((item, index) => (
                                                                                    <ListItem key={index} disableGutters style={{ padding: '8px 0' }}>
                                                                                        <ListItemText 
                                                                                            primary={
                                                                                                <Box display="flex" justifyContent="space-between">
                                                                                                    <Typography variant="body1" style={{ fontWeight: '500' }}>
                                                                                                        {item.content_point}
                                                                                                    </Typography>
                                                                                                    <Chip 
                                                                                                        label={`${Math.round(item.content_point_weight)}`} 
                                                                                                        size="small" 
                                                                                                        style={{ 
                                                                                                            backgroundColor: '#F5F7FA',
                                                                                                            color: '#333333',
                                                                                                            border: '1px solid #E5E6EB',
                                                                                                            borderRadius: '16px',
                                                                                                            fontWeight: '500',
                                                                                                            fontSize: '11px' // 缩小字体
                                                                                                        }} 
                                                                                                    />
                                                                                                </Box>
                                                                                            }
                                                                                        />
                                                                                    </ListItem>
                                                                                ))}
                                                                            {detailDialog.analysisData.list.filter(a => a.content_point).length > 5 && (
                                                                                <ListItem disableGutters style={{ padding: '8px 0' }}>
                                                                                    <ListItemText 
                                                                                        primary={
                                                                                            <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
                                                                                                还有 {detailDialog.analysisData.list.filter(a => a.content_point).length - 5} 个观点...
                                                                                            </Typography>
                                                                                        }
                                                                                    />
                                                                                </ListItem>
                                                                            )}
                                                                        </List>
                                                                    </CardContent>
                                                                </Card>
                                                            </Grid>
                                                            
                                                            {/* 事件分析 */}
                                                            <Grid item xs={4}>
                                                                <Card variant="outlined" style={{ 
                                                                    height: '100%',
                                                                    borderRadius: '8px',
                                                                    border: '1px solid #E5E6EB',
                                                                    overflow: 'hidden'
                                                                }}>
                                                                    <Box 
                                                                        sx={{ 
                                                                            backgroundColor: '#F5F7FA', 
                                                                            padding: '16px', 
                                                                            borderBottom: '1px solid #E5E6EB',
                                                                            display: 'flex',
                                                                            justifyContent: 'space-between',
                                                                            alignItems: 'center'
                                                                        }}
                                                                    >
                                                                        <Typography variant="h6" style={{ color: '#333333', fontWeight: '600' }}>
                                                                            事件分析
                                                                        </Typography>
                                                                        <Chip 
                                                                            label={detailDialog.analysisData.list.filter(a => a.content_event).length} 
                                                                            size="small" 
                                                                            color="primary" 
                                                                            style={{ 
                                                                                backgroundColor: '#90CAF9', // 使用浅蓝色
                                                                                color: '#333333',
                                                                                fontWeight: '500',
                                                                                fontSize: '11px' // 缩小字体
                                                                            }}
                                                                        />
                                                                    </Box>
                                                                    <CardContent style={{ padding: '16px' }}>
                                                                        <List dense>
                                                                            {detailDialog.analysisData.list
                                                                                .filter(item => item.content_event)
                                                                                .slice(0, 5)
                                                                                .map((item, index) => (
                                                                                    <ListItem key={index} disableGutters style={{ padding: '8px 0' }}>
                                                                                        <ListItemText 
                                                                                            primary={
                                                                                                <Box display="flex" justifyContent="space-between">
                                                                                                    <Typography variant="body1" style={{ fontWeight: '500' }}>
                                                                                                        {item.content_event}
                                                                                                    </Typography>
                                                                                                    <Chip 
                                                                                                        label={`${Math.round(item.content_event_weight)}`} 
                                                                                                        size="small" 
                                                                                                        style={{ 
                                                                                                            backgroundColor: '#F5F7FA',
                                                                                                            color: '#333333',
                                                                                                            border: '1px solid #E5E6EB',
                                                                                                            borderRadius: '16px',
                                                                                                            fontWeight: '500',
                                                                                                            fontSize: '11px' // 缩小字体
                                                                                                        }} 
                                                                                                    />
                                                                                                </Box>
                                                                                            }
                                                                                        />
                                                                                    </ListItem>
                                                                                ))}
                                                                            {detailDialog.analysisData.list.filter(a => a.content_event).length > 5 && (
                                                                                <ListItem disableGutters style={{ padding: '8px 0' }}>
                                                                                    <ListItemText 
                                                                                        primary={
                                                                                            <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
                                                                                                还有 {detailDialog.analysisData.list.filter(a => a.content_event).length - 5} 个事件...
                                                                                            </Typography>
                                                                                        }
                                                                                    />
                                                                                </ListItem>
                                                                            )}
                                                                        </List>
                                                                    </CardContent>
                                                                </Card>
                                                            </Grid>
                                                        </Grid>
                                                        
                                                        <Box marginTop={4} textAlign="center">
                                                            <Button 
                                                                variant="contained" 
                                                                style={{ 
                                                                    backgroundColor: '#90CAF9', // 使用浅蓝色
                                                                    color: '#333333',
                                                                    fontWeight: '500',
                                                                    borderRadius: '8px',
                                                                    padding: '10px 24px'
                                                                }}
                                                                href={`/pages/business/analysisList.html?contentId=${detailDialog.content.id}`}
                                                                target="_blank"
                                                                startIcon={<span className="material-icons">open_in_new</span>}
                                                            >
                                                                查看完整分析
                                                            </Button>
                                                        </Box>
                                                    </Box>
                                                ) : (
                                                    <Box 
                                                        display="flex" 
                                                        flexDirection="column" 
                                                        justifyContent="center" 
                                                        alignItems="center" 
                                                        height="100%"
                                                        textAlign="center"
                                                        padding="24px"
                                                    >
                                                        <span className="material-icons" style={{ 
                                                            fontSize: '64px', 
                                                            color: '#CCCCCC', 
                                                            marginBottom: '24px' 
                                                        }}>
                                                            analytics
                                                        </span>
                                                        <Typography variant="h5" color="textSecondary" style={{ marginBottom: '12px' }}>
                                                            暂无分析数据
                                                        </Typography>
                                                        <Typography variant="body1" color="textSecondary" style={{ marginBottom: '32px', maxWidth: '400px' }}>
                                                            该内容尚未进行分析，请前往分析列表页面添加分析
                                                        </Typography>
                                                        <Button 
                                                            variant="contained" 
                                                            style={{ 
                                                                backgroundColor: '#90CAF9', // 使用浅蓝色
                                                                color: '#333333',
                                                                fontWeight: '500',
                                                                borderRadius: '8px',
                                                                padding: '10px 24px'
                                                            }}
                                                            href={`/pages/business/analysisList.html?contentId=${detailDialog.content.id}`}
                                                            target="_blank"
                                                            startIcon={<span className="material-icons">add</span>}
                                                        >
                                                            开始分析
                                                        </Button>
                                                    </Box>
                                                )}
                                            </TabPanel>
                                        </Paper>
                                    </Grid>
                                </Grid>
                            )}
                        </DialogContent>
                        <DialogActions style={{ 
                            backgroundColor: '#F5F7FA', 
                            borderTop: '1px solid #E5E6EB',
                            padding: '16px 24px'
                        }}>
                            <Button 
                                onClick={() => setDetailDialog({ open: false, content: null, sourceDetail: null, analysisData: null, keywordAnalysis: null })}
                                style={{ 
                                    color: '#333333', // 使用深色文字
                                    fontWeight: '500'
                                }}
                            >
                                关闭
                            </Button>
                        </DialogActions>
                    </Dialog>
                </div>
            );
        }

        // 渲染组件到页面
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<ContentManagement />);
    </script>
</body>

</html>